 <template>
  <div class="app">
    <header>
      <div class="head">
        <div>
          <img
            src="https://img2.baidu.com/it/u=295750940,1438666818&fm=26&fmt=auto&gp=0.jpg"
            alt=""
          />
        </div>
        <input type="text" placeholder="请输入商品名" />
        <p><span></span><span></span><span></span></p>
      </div>
      <div class="dc">
        <ul>
          <li>点菜</li>
          <li>评价</li>
          <li>商家</li>
        </ul>
        <span>好友拼单</span>
      </div>
    </header>
    <main>
      <div class="m-left">
        <span v-for="(i, item) in this.$store.state.arrnew" :key="item">{{
          i.name
        }}</span>
      </div>
      <div class="m-right">
        <dl v-for="(i, item) in this.$store.state.arr" :key="item">
          <dt><img :src="i.pic" /></dt>
          <dd>
            <p>{{ i.title }}</p>
            <p>门店销量第{{ i.xl }}名</p>
            <p>月售{{ i.ys }} 好评度100%</p>
            <p>
              <span>{{ i.zk }}</span
              ><span>限1份</span>
            </p>
            <p>
              <span>￥{{ i.price }}</span
              ><del>￥{{ i.by }}</del>
              <em @click="jian(item)" v-if="$store.state.arr[item].chuxian"
                >-</em
              >
              <a href="">{{ i.n }}</a>
              <i @click="jia(item)">+</i>
            </p>
          </dd>
        </dl>
      </div>
    </main>
    <footer class="fot">
      <div class="left-h" @click="xianshi">
        <img src="../assets/微信图片_20210826155625.png" alt="" />
        <span class="jishu" style="color: white">{{
          this.$store.state.zongshu
        }}</span>
        <!-- <p @click="xianshi">券后￥{{ $store.getters.getsum.toFixed(2) }}</p> -->
      </div>
      <div class="left-huang">去结算</div>
      <div class="yangshi" v-if="chulai == true">
        <dl
          v-for="(i, item) in this.$store.state.arr"
          :key="item"
          v-if="$store.state.arr[item].chuxian"
        >
          <dt><img :src="i.pic" /></dt>
          <dd>
            <p>{{ i.title }}</p>
            <p>门店销量第{{ i.xl }}名</p>
            <p>月售{{ i.ys }} 好评度100%</p>
            <p>
              <span>{{ i.zk }}</span
              ><span>限1份</span>
            </p>
            <p>
              <span>￥{{ i.price }}</span
              ><del>￥{{ i.by }}</del>
              <em @click="jian(item)" v-if="$store.state.arr[item].chuxian"
                >-</em
              >
              <a href="">{{ i.n }}</a>
              <i @click="jia(item)">+</i>
            </p>
          </dd>
        </dl>
      </div>
    </footer>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      chulai: false,
    };
  },
  methods: {
    jia(item) {
      this.$store.commit("setN", item);
    },
    jian(item) {
      this.$store.commit("setM", item);
    },
    xianshi() {
      this.chulai = !this.chulai;
    },
  },
};
</script>
 <style scoped >
.yangshi {
  position: absolute;
  background: pink;
  width: 100%;
  overflow: hidden;
  bottom: 20%;
}
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.active {
  background: #fff !important;
}
header {
  width: 100%;
  height: 6rem;
  display: flex;
  flex-direction: column;
  padding: 0 0.3rem;
}
.head {
  width: 100%;
  height: 40%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: relative;
}
.head input {
  height: 1.5rem;
  border-radius: 15px;
  background: #f1f1f1;
  border: none;
  padding-left: 30px;
  box-sizing: border-box;
  outline: none;
}
.head img:nth-child(1) {
  width: 1rem;
  height: 1rem;
}
.head img:nth-child(2) {
  width: 1rem;
  height: 1rem;
}
.head img:nth-child(3) {
  position: absolute;
  left: 55px;
  width: 1rem;
  height: 1rem;
}
.head img:nth-child(4) {
  width: 1.5rem;
  height: 1.5rem;
}
.head img:nth-child(5) {
  width: 1.5rem;
  height: 1.5rem;
}
.head p {
  width: 2rem;
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head p span {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0.3rem;
  background: #656565;
}
.dc {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border-bottom: 1px solid #cccc;
  align-items: center;
}
.dc ul {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dc ul li {
  padding-bottom: 10px;
  box-sizing: border-box;
}
.dc span {
  width: 5rem;
  height: 2rem;
  border: 1px solid #e2bf95;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 10px;
  color: #f9a34c;
}
main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: space-between;
}
.m-left {
  width: 6rem;
  height: 36rem;
  background: #f5f8fd;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-left span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10rem;
  white-space: nowrap;
}
.m-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 10px 0px 10px;
}
.m-right dl {
  width: 100%;
  height: 7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.m-right dt {
  width: 7rem;
  height: 100%;
}
.m-right dt img {
  width: 7rem;
  height: 100%;
  border-radius: 10px;
}
.m-right dd {
  flex: 1;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
}
.m-right dd p {
  margin-top: 5px;
}
.m-right dd p:nth-child(1) {
  font-weight: 700;
  color: #262626;
}
.m-right dd p:nth-child(2) {
  width: 7rem;
  height: 1rem;
  background: #fef8e2;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cf9331;
}
.m-right dd p:nth-child(3) {
  color: #a09ea1;
  font-size: 14px;
  white-space: nowrap;
}
.m-right dd p:nth-child(4) {
  width: 7rem;
  font-size: 14px;
  color: #e16570;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border: 1px solid #e0d4d8;
}
.m-right dd p:nth-child(5) {
  position: relative;
}
.m-right dd p:nth-child(5) span {
  font-weight: 700;
  color: #f44b4e;
}
.m-right dd p:nth-child(5) del {
  font-size: 14px;
  color: #a8a6a7;
}
.m-right dd p:nth-child(5) i {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #fecc35;
  font-style: normal;
  right: 0px;
  top: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.m-right dd p:nth-child(5) em {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #fecc35;
  font-style: normal;
  right: 35px;
  top: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.m-right dd p:nth-child(5) a {
  position: absolute;
  right: 20px;
}
footer {
  background: #fef1e1;
  width: 100%;
  height: 4rem;
  border-radius: 10px;
  padding: 0 0.3rem;
  padding-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-h {
  width: 16rem;
  position: relative;
  height: 3rem;
  border-radius: 20px 0 0 20px;
  background: #000;
  padding-left: 54px;
}
.left-h p {
  position: relative;
  left: 0%;
  top: 10%;
  color: #fff;
}
.left-h img {
  position: absolute;
  top: -20px;
  left: 10px;
  width: 3rem;
}
.jishu {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 38px;
  display: flex;
  background: #f44b4e;
}
.left-huang {
  width: 5rem;
  height: 3rem;
  border-radius: 0 20px 20px 0;
  background: #fecc35;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.3px;
  font-weight: 700;
}
</style>
<style scoped>
.yangshi dl {
  width: 18rem;
  height: 7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.yangshi dt {
  width: 7rem;
  height: 100%;
}
.yangshi dt img {
  width: 7rem;
  height: 100%;
  border-radius: 10px;
}
.yangshi dd {
  flex: 1;
  padding: 0px 10px;
  display: flex;
  flex-direction: column;
}
.yangshi dd p {
  margin-top: 5px;
}
.yangshi dd p:nth-child(1) {
  font-weight: 700;
  color: #262626;
}
.yangshi dd p:nth-child(2) {
  width: 7rem;
  height: 1rem;
  background: #fef8e2;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cf9331;
}
.yangshi dd p:nth-child(3) {
  color: #a09ea1;
  font-size: 14px;
  white-space: nowrap;
}
.yangshi dd p:nth-child(4) {
  width: 7rem;
  font-size: 14px;
  color: #e16570;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  border: 1px solid #e0d4d8;
}
.yangshi dd p:nth-child(5) {
  position: relative;
}
.yangshi dd p:nth-child(5) span {
  font-weight: 700;
  color: #f44b4e;
}
.yangshi dd p:nth-child(5) del {
  font-size: 14px;
  color: #a8a6a7;
}
.yangshi dd p:nth-child(5) i {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #fecc35;
  font-style: normal;
  right: 0px;
  top: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.yangshi dd p:nth-child(5) em {
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #fecc35;
  font-style: normal;
  right: 35px;
  top: 3px;
  text-align: center;
  line-height: 0.8rem;
}
.yangshi dd p:nth-child(5) a {
  position: absolute;
  right: 20px;
}
</style>